<template>
  <div style="width: calc(100%- 0px);height: 100%">
    <n-card class="editorPanel"  style="height: 100%;width: 100%;padding:0px" >
      <Shape
          v-for="(item, index) in componentList"
          :style="{position: 'absolute', ...item.style }"
          @mousedown="startDrag($event, index)"
      >

        <component
            :is="item.component"
            :key="index"
            v-bind="resolveProps(item.props)"
            v-model:value="item.model"
            v-on="item.events"
        >
          <!-- 如果有插槽内容，渲染它 -->
          <template v-if="item.content">
            {{ item.content }}
          </template>
          <!-- 渲染子组件 -->
          <template v-if="item.children">
            <component
                v-for="(child, childIndex) in item.children"
                :is="child.type"
                :key="childIndex"
                v-bind="resolveProps(item.props)"
                v-on="child.events"
            >
              <template v-if="child.content">
                {{ child.content }}
              </template>
            </component>
          </template>
        </component>
      </Shape>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { NButton, NInput, NCard } from 'naive-ui';
import Shape from './shape.vue'
import {useEditorStore} from "@/stores/editorStore.ts";
import {computed, reactive} from "vue";
// 引入编辑器状态管理
const editorStore = useEditorStore();
// 动态获取组件列表
const componentList = computed(() => editorStore.componentList);

// 动态解析 props，将包含 `value` 的属性转为组件实际需要的值
const resolveProps = (props: Record<string, { value?: any; defaultValue?: any }>) => {
  const resolvedProps: Record<string, any> = {};
  for (const key in props) {
    // 优先使用 `value`，否则使用 `defaultValue`
    if (props[key]?.value !== undefined) {
      resolvedProps[key] = props[key].value;
    } else if (props[key]?.defaultValue !== undefined) {
      resolvedProps[key] = props[key].defaultValue;
    }
  }
  return resolvedProps;
};
// 拖拽状态
const dragState = reactive({
  isDragging: false,
  startX: 0,
  startY: 0,
  initialTop: 0,
  initialLeft: 0,
  draggingIndex: -1,
});


// 拖拽中
const handleDrag = (event: MouseEvent) => {
  if (!dragState.isDragging || dragState.draggingIndex === -1) return;
  const deltaX = event.clientX - dragState.startX;
  const deltaY = event.clientY - dragState.startY;
  const newTop = dragState.initialTop + deltaY;
  const newLeft = dragState.initialLeft + deltaX;
  // 更新组件位置
  componentList.value[dragState.draggingIndex].style.top = `${newTop}px`;
  componentList.value[dragState.draggingIndex].style.left = `${newLeft}px`;
};

// 停止拖拽
const stopDrag = () => {
  if (!dragState.isDragging) return;
  console.log('停止拖拽');
  dragState.isDragging = false;
  dragState.draggingIndex = -1;

  // 解绑事件
  document.removeEventListener('mousemove', handleDrag, true);
  document.removeEventListener('mouseup', stopDrag, true);
};

// 开始拖拽
const startDrag = (event: MouseEvent, index: number) => {
  console.log('开始拖拽');
  dragState.isDragging = true;
  dragState.startX = event.clientX;
  dragState.startY = event.clientY;
  dragState.initialTop = parseFloat(componentList.value[index].style.top || '0');
  dragState.initialLeft = parseFloat(componentList.value[index].style.left || '0');
  dragState.draggingIndex = index;

  // 全局绑定事件
  document.addEventListener('mousemove', handleDrag, true); // 使用捕获模式
  document.addEventListener('mouseup', stopDrag, true); // 使用捕获模式
};

</script>
<style scoped>
.editorPanel {
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  box-shadow: gray 0px 0px 5px 1px
}
:deep(.n-card__content){
  padding-top: 0px !important;
  padding: 0px;
}
</style>